<template>
	<view class="container" v-if="info">		
		<view class="casei_cover" :style="'height: '+imageH+'px'">
			<image class="cover_img" :src="info.image" mode="aspectFit" />
		</view>		
		
		<view class="box-bg" style="background-color: transparent;">
			<uni-nav-bar :border="false" :statusBar="true" backgroundColor="transparent">
				<block slot="left">
					<uni-icons type="back" color="#fff" size="18" @click="goback" />
				</block>
			</uni-nav-bar>
		</view>
		
		<view class="casei_house uni-flex justify-space-between text-center fs12">				
			<view>
				<view class="person_img text-white bg-blue fs13">{{ getFirstName(info.service.DesignerName) }}</view>
				<view class="">{{ info.service.DesignerName || "" }}</view>
				<view class="text-gray9 m-t10 fs11">设计师</view>
			</view>
			<view>
				<view class="person_img text-white bg-blue fs13">{{ getFirstName(info.service.EngineerManagerName) }}</view>
				<view class="">{{ info.service.EngineerManagerName || "" }}</view>
				<view class="text-gray9 m-t10 fs11">项目经理</view>
			</view>
			<view>
				<view class="person_img text-white bg-blue fs13">{{ getFirstName(info.service.SurveyorName) }}</view>
				<view class="">{{ info.service.SurveyorName || "" }}</view>
				<view class="text-gray9 m-t10 fs11">工程监理</view>
			</view>
		</view>
		
		<view class="casei_content fs12 m-b30">
			<view class="m-t30 p-30 bg-white">
				<view class="casei_title fs15 fw600 m-b20">{{ info.title }}</view>
				<!-- <view class="uni-flex justify-space-between">
					<view class="casei_text fs12 m-b20">施工{{ info.service.day }}天</view>
					<view class="cover_label bg-blue text-white fs10 round-10">{{ info.project || "开工" }}</view>					
				</view>
				
				<view class="casei_labels">
					<view class="casei_label">{{ info.area }}㎡</view>
					<view class="casei_label">{{ info.type.title }}</view>
					<view class="casei_label">{{ info.style.title }}</view>
				</view> -->
			</view>	
		</view>		
		
		<tablist :data="tabList" :index="tabIndex" @result="tabResult"></tablist>
		<view class="log_tab_0 bg-white border-t1" v-if="tabIndex == 0">
			<view class="p-b30" v-if="logList.length == 0">
				<noempty></noempty>
			</view>			
			<view class="log_list fs12 p-b30" v-else>
				<view v-for="item in logList" class="log_item">
					<view class="log_time p-t30 p-b30 uni-flex justify-left">
						<uni-icons type="circle-filled" size="18" color="#007AFF"></uni-icons>
						<view class="log_time_text p-l10">{{ item.start_date }}</view>
					</view>
					<view class="log_cont fs12 p-l30">
						<!-- <view class="log_title border-b1 fs14 p-b20">{{ item.user_name }}</view> -->
						<view class="m-t20">工地日报</view>
						<view class="text-gray9 m-t30 m-b30 ">{{ item.content }}</view>
						<view class="log_imgs w-100" v-if="1==2">
							<image class="w-100n h-100n m-r10 m-b10" v-for="(img,ikey) in item.images" :src="img" mode="aspectFill" @click="viewImage(item.images, ikey)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="log_tab_1 bg-white border-t1" v-if="tabIndex == 1">
			<view class="p-b30" v-if="!info.comment">
				<noempty></noempty>
			</view>
			<!--评价-->		
			<uni-forms class="p-b30" ref="formData" label-position="top" label-width="200" v-else>		
				<view class="p-30 bg-white">
					<uni-forms-item label="工地评价">
						<comment :isclick="false" type="star" :data="serviceScore"></comment>
						<view class="m-t20">
							{{ info.comment.content }}
						</view>	
						<view class="m-t20">
							<view class="imgs uni-flex justify-left flex-auto-row" v-if="info.comment.images.length>0">
								<view v-for="(item,ikey) in info.comment.images" class="imgs_item1">
									<image class="bg-grayf5" :src="item" mode="aspectFill" @click="viewImage(info.comment.images, ikey)"></image>
								</view>
							</view>
						</view>
					</uni-forms-item>
				</view>			
				<view class="p-30 bg-white">
					<uni-forms-item label="服务人员评价">
						<comment :isclick="false" type="number" :data="personScore"></comment>
					</uni-forms-item>		
				</view>
			</uni-forms>
		</view>
			
		<common-footer></common-footer>		
		
		<view class="case_fixed" v-if="info.vr_url || info.d3_url">
			<view class="case_fixed_btn case_vr" @click="goPage('vr')" v-if="info.vr_url">
				<image src="/static/vr.png" mode="aspectFill" />
			</view>
			<view class="case_fixed_btn case_3d" @click="goPage('3d')" v-if="info.d3_url">
				<image src="/static/3d.png" mode="aspectFill" />
			</view>
		</view>
		
			
	</view>
</template>
<script>
import { cityList, housePrice, caseDetail, caseList } from "@/api/house.js"
import { getProjectLog } from "@/api/project.js"
import { listBySubDh } from '@/api/comment.js';

import richTextUtil from '@/common/js/richTextUtil.js'
import moment from 'moment'
let that;
export default {
	data() {
		return {
			id: 0,	//案例id
			info: "",
			top: 0,	//滚动条距离顶部高度
			imageH: 0,
			
			tabIndex: 0,
			tabList: [
				{value: 0, text: '工地日报'},
				// {value: 1, text: '业主评价'},
			],
			logList: [],	//工地日报
			serviceScore: [],
			personScore: []
			
		}
	},
	onLoad(e){
		that = this
		that.id = e.id ? e.id : 0
		if(that.id > 0) {
			that.getDetail()
		}
	},
	onPageScroll(e) {
		that.top = parseInt(e.scrollTop) - that.imageH - 10 > 0 ? parseInt(that.imageH) + 10 :0
	},
	methods: {
		tabResult(index){
			this.tabIndex = index
		},
		// 工地日报
		getLogList(){
			if(that.info.sub_dh=="" || that.info.sub_dh==null) return
			getProjectLog({
				order: "id asc",
				condition: {
					sub_dh: that.info.sub_dh					
				}
			}).then(res => {
				that.logList = res.data
			})
		},
		/**
		 * 获取首字
		 */
		getFirstName(str) {
			return str ? str.substring(0,1) : "";
		},
		/**
		 * 获取案例详情
		 */
		getDetail() {
			caseDetail(that.id).then(res => {
				that.info = res.data
        that.logList = res.data.logs
				that.getHeight()
				// that.getLogList()
				that.serviceScore.push({title: "", star: parseInt(that.info.comment.star) })
				that.info.comment_persons.forEach((item,key) => {
					that.personScore.push({
						title: item.person_type,
						star: item.star
					})
				})
				
			})
		},
		// 计算图片高度
		getHeight(){
			let screenWidth = uni.getSystemInfoSync().screenWidth
			if(that.info.image_w > screenWidth) {
				that.imageH = parseInt(that.info.image_h / (that.info.image_w / screenWidth))
			}else {
				that.imageH = parseInt(screenWidth / that.info.image_w * that.info.image_h)
			}
		},
		goback(){
			uni.navigateBack(-1)
		},
		goPage(type, content) {
			let url = ""
			if(type == '3d') {
				url = `/pages/index/design?url=${encodeURIComponent(that.info.d3_url)}`
			}else if(type == 'vr') {
				url = `/pages/index/design?url=${encodeURIComponent(that.info.vr_url)}`				
			}
			uni.navigateTo({
				url: url
			})		
		},
		/**
		 * 查看大图
		 */
		viewImage(imgs,index){
			uni.previewImage({
				current: index,
				urls: imgs
			})
		},
	}
}
</script>
<style>
.casei_cover {
	width: 100%;
	height: auto;
}
.cover_img {
	width: 100%;
	height: 100%;
}
.casei_label {
	color: rgba(0, 122, 255, .8);
	padding: 3px 8px;
	border-radius: 20rpx;
	background-color: rgba(0, 122, 255, .1);
	display: inline-block;
	margin-right: 8px;
	font-size: 10px;
}
.case_rich {
	line-height: 22px;
	color: #333;
}
.casei_house {
	width: 70%;
	position: relative;
	padding: 0 15% 30rpx;
	background-color: #fff;
}
.person_img {
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	overflow: hidden;
	border-radius: 50%;
	display: inline-block;
	margin-top: -30rpx;
}

.cover_label {
	padding: 0 16rpx;
	line-height: 18px;
	height: 18px;
	display: inline-block;
}
.log_list {
	border-left: 1px solid #007AFF;
	margin: 0 35rpx;
}
.log_time {
	position: relative;
	left: -9px;
}
.log_time_text {
	padding-top: 4rpx;
}
</style>